<template>
  <div class="sell-page">
    <SearchCard id-key="historyList"
      v-model:value="params.cardProductName"
      @clear="fetchDataByType(params.cardProductType)"
      :state-card-list="stateAll.data" />
    <Tabs v-model:active="params.cardProductType"
      @click-tab="(e) => fetchDataByType(e.name)">
      <Tab :title="category.name"
        :name="category.code" :key="category.id"
        v-for="category in stateCardType.data">
        <CellGroup title="卡券列表">
          <template v-if="!stateCardList.loading">
            <Grid square>
              <GridItem
                v-for="card in stateCardList.data"
                :key="card.cardProductId"
                @click="handleSelect(card)">
                <template #icon>
                  <Image
                    :src="card.imageUrl || cover"
                    :width="80" :height="30"
                    radius="4" fit="contain" />
                </template>
                <template #text>
                  <CardTitle
                    :text="card.cardProductName" />
                </template>
              </GridItem>
            </Grid>
          </template>
        </CellGroup>
      </Tab>
    </Tabs>
    <SkeletonCategory
      v-if="stateCardType.loading" />
    <SkeletonCard
      v-if="stateCardList.loading" />
    <Empty description="暂无数据"
      v-if="!stateCardList.data.length && !stateCardList.loading && !stateCardType.loading" />
  </div>
</template>

<script setup lang="ts">
import { storeToRefs } from 'pinia';
import {
  CellGroup, Empty, Grid, GridItem, Image, Tab, Tabs,
} from 'vant';
import { onMounted, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';

import SkeletonCard from '@/components/SkeletonCard.vue';
import SkeletonCategory from '@/components/SkeletonCategory.vue';
import usePlatformStore from '@/stores/platform.store';
import camel2snake from '@/utils/camel2snake';
import pathReplace from '@/utils/pathReplace';
import CardTitle from '@/views/home-page/components/CardTitle.vue';
import type CardItem from '@/views/home-page/models/CardItem';

import useCardList from '../../home-page/hooks/useCardList';
import useCardType from '../../home-page/hooks/useCardType';
import SearchCard from '../components/SearchCard.vue';

const route = useRoute();
const router = useRouter();
const { state: stateCardType, fetchData: fetchCardType } = useCardType();
const {
  params,
  state: stateCardList,
  fetchDataByType,
  fetchAllData,
  stateAll,
} = useCardList();
const platformStore = usePlatformStore();

const handleInit = async () => {
  const { category } = route.query;
  await fetchCardType();
  if (category) {
    await fetchDataByType(`${category}`);
  } else {
    await fetchDataByType(stateCardType.value.data[0].code);
  }
};

const { platformCardTpye } = storeToRefs(platformStore);
onMounted(async () => {
  if (platformCardTpye) {
    params.value.platformType = platformCardTpye.value;
  } else {
    await platformStore.fetchDefaultPlatform();
  }

  fetchAllData();
  handleInit();
});

watch(
  () => params.value.cardProductType,
  () => {
    pathReplace(router, route, camel2snake({ category: params.value.cardProductType }));
  },
);

const cover = 'https://media.zykq.net/product/d210cd035a4d3f8401d53fe4b6c63ae1.png';

const handleSelect = (card: CardItem) => {
  router.push({ name: 'CardSubmit', params: { id: `${card.cardProductId}` } });
};
</script>
<style lang="less" scoped>
.sell-page {
  height: 100%;
}
</style>
